<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内部报表</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.9.7/css/layui.css">
</head>
<body>
<div class="layui-container">
    <h1 class="layui-header">内部报表</h1>
    <div id="reportContent">
        <input type="text" id="searchInput" placeholder="请输入关键词进行搜索">
        <button onclick="searchReports()">搜索</button>
        <a th:href="@{/export/internal_report}" class="layui-btn">导出Excel</a>

        <table class="layui-table">
            <thead>
            <tr>
                <th>序号</th>
                <th>站点名称</th>
                <th>操作类型</th>
                <th>数量</th>
                <th>报表日期</th>
            </tr>
            </thead>
            <tbody>
            <!-- 使用 Thymeleaf 遍历显示数据 -->
            <tr th:each="report : ${internalReports}">
                <td th:text="${report.id}"></td>
                <td th:text="${report.stationName}"></td>
                <td th:text="${report.operationType}"></td>
                <td th:text="${report.quantity}"></td>
                <td th:text="${#dates.format(report.reportDate, 'yyyy-MM-dd HH:mm:ss')}"></td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/layui/2.9.7/layui.js"></script>
<script>
    function searchReports() {
        var keyword = $('#searchInput').val();
        window.location.href = '/search/internal_report?keyword=' + keyword;
    }
</script>
</body>
</html>
